<script>
export default {
  props: {
    value:String
  },
  data(){
    return{
      isEdit:false
    }
  },
  methods:{
    handleClick() {
      this.isEdit = true
    },
    handleEnter(e) {
      //非空处理
      if (e.target.value.trim() === '') return alert('内容不能为空')
      /*子传父,回车的时候,输入框的内容提交给父组件更新
      由于父组件是v-model,触发事件,需要触发input事件
      * */
      this.$emit('input',e.target.value)
      //提交完成,关闭输入状态
      this.isEdit = false
    },
  }
}
</script>

<template>
<!--  失去焦点,隐藏输入框: @blur="isEdit = false-->
  <div class="my-tag">
     <input v-if="isEdit" v-focus
      class="input"
      type="text"
      placeholder="输入标签"
            :value="value"
            @blur="isEdit = false"
            @keyup.enter="handleEnter"
    />
    <div v-else @dblclick="handleClick" class="text">
      {{ value }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>